<template>
	<view>
		<view class="feng_flow">
			<view class="flow_block">
				<view class="flow_item" v-for="(item, i1) in lists1" :key="i1">
					<image :src="item.goodImg" mode="widthFix" style="width: 100%;" @click="onItem(item)"></image>
					<!-- <view class="flow_item_con">
						<view class="flow_item_title">￥{{ item.price }}</view>
						<view class="flow_item_des">{{ item.id }}{{ item.yishujia }}</view>
						<view class="flow_item_des">{{ item.timu }}</view>
						<view class="flow_item_des">{{ item.nianfen }}</view>
						<view class="flow_item_des">{{ item.caizhi }}</view>
						<view class="flow_item_des">{{ item.chicun }}</view>
					</view> -->
				</view>
			</view>
			<view class="flow_block">
				<view class="flow_item" v-for="(item2, i2) in lists2" :key="i2">
					<image :src="item2.goodImg" mode="widthFix" style="width: 100%;" @click="onItem(item2)"></image>
					<!-- <view class="flow_item_con">
						<view class="flow_item_title">￥{{ item2.price }}</view>
						<view class="flow_item_des">{{ item2.id }}{{ item2.yishujia }}</view>
						<view class="flow_item_des">{{ item2.timu }}</view>
						<view class="flow_item_des">{{ item2.nianfen }}</view>
						<view class="flow_item_des">{{ item2.caizhi }}</view>
						<view class="flow_item_des">{{ item2.chicun }}</view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="feng_flow" style="display: none;">
			<view class="flow_block">
				<view class="flow_item" v-for="(data, da_i) in dataLists" :key="da_i">
					<image :src="data.goodImg" @error="imgError" @load="imgLoad" :id="da_i" mode="widthFix" style="width:100%;"></image>
				</view>
			</view>
			<view class="flow_block"></view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'fengFlow',
	props: {
		dataLists: {
			default: []
		}
	},
	data() {
		return {
			lists1: [],
			lists2: [],
			list1Height: 0,
			list2Height: 0,
			tmp_data: [],
			loaded: [], //图片加载成功数组
			loadErr: [], //图片加载失败数组
			showLoad: false,
			type: false
		}
	},
	methods: {
		setType(i) {
			this.type = i
		},
		onItem(item) {
			this.$emit('getListItem', item);
		},
		//处理数据
		refresData() {
			this.hideLoadFlag()
			if (this.loaded.length + this.loadErr.length < this.tmp_data.length) return
			const that = this
			if (!this.type) {
				that.lists2 = []
				that.lists1 = []
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				})
			}
			this.tmp_data.map((da, di) => {
				if (that.list1Height > that.list2Height) {
					that.list2Height += da.img_height
					that.lists2.push(da)
				} else {
					that.list1Height += da.img_height
					that.lists1.push(da)
				}
			})
		},
		//图片加载完成补齐数据
		imgLoad(e) {
			this.loaded.push(e.target.id)
			//存储数据
			this.tmp_data[e.target.id]['img_width'] = e.detail.width
			this.tmp_data[e.target.id]['img_height'] = e.detail.height
		},
		//图片未加载成功触发
		imgError(e) {
			this.loadErr.push(e.target.id)
		},
		showLoadFlag() {
			if (!this.showLoad) {
				this.showLoad = true
				uni.showLoading({
					title: 'loading...',
					mask: 'none'
				})
			}
		},
		hideLoadFlag() {
			if (this.showLoad) {
				uni.hideLoading()
				this.showLoad = false
			}
		}
	},
	mounted() {
		this.tmp_data = this.dataLists
		this.showLoadFlag()
	},
	watch: {
		dataLists() {
			this.loaded = []
			this.loadErr = []
			this.tmp_data = this.dataLists
			this.showLoadFlag()
		},
		loaded() {
			//最后一个加载完成负责刷新数据
			this.refresData()
		},
		loadErr() {
			//最后一个加载完成负责刷新数据
			this.refresData()
		}
	}
}
</script>

<style>
.feng_flow {
	display: flex;
	padding: 15upx;
}
.flow_block {
	display: flex;
	flex: 1;
	flex-direction: column;
}
.flow_item {
	margin: 15upx;
	border-radius: 20upx;
	background: #f4f4f4;
	overflow: hidden;
}
</style>
